<!DOCTYPE html>
<html>
<head>
    <title>Endless scrolling</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" >
    <script src="../../../js/jquery.min.js"></script>
    <script src="../../../js/kendo.mobile.min.js"></script>
    <script src="../../content/shared/js/console.js"></script>
    <link href="../../../styles/kendo.common.min.css" rel="stylesheet" />
    <link href="../../../styles/kendo.mobile.all.min.css" rel="stylesheet" />
</head>
<body>
    <a href="../index.html">Back</a>
    <div data-role="view" data-init="mobileListViewEndlessScrolling" data-title="Scroll down to load">
    <header data-role="header">
        <div data-role="navbar">
            <span data-role="view-title"></span>
            <a data-align="right" data-role="button" class="nav-button" href="#index">Index</a>
        </div>
    </header>

    <ul id="endless-scrolling"></ul>
</div>

<script id="endless-scrolling-template" type="text/x-kendo-template">
    <div class="tweet">
        <img class="pullImage" src="#= profile_image_url #" alt="#= from_user #" />#= text #
        <div class="metadata">
            <a class="sublink" target="_blank" href="http://twitter.com/\\#!/#= from_user #/status/#= id_str #" data-rel="external" rel="nofollow">#= kendo.toString(new Date(Date.parse(created_at)), "dd MMM HH:mm") #</a>
            |
            <a class="sublink" href="http://twitter.com/#= from_user #" rel="nofollow" data-rel="external">#= from_user #</a>
        </div>
    </div>
</script>

<script>
    function mobileListViewEndlessScrolling() {
            var dataSource = new kendo.data.DataSource({
                pageSize: 12,
                serverPaging: true,
                transport: {
                    read: {
                        url: "http://search.twitter.com/search.json", // the remove service url
                        dataType: "jsonp" // JSONP (JSON with padding) is required for cross-domain AJAX
                    },
                    parameterMap: function(options) {
                        var parameters = {
                            q: "javascript", //additional parameters sent to the remote service
                            rpp: options.pageSize,
                            page: options.page //next page
                        }

                        return parameters;
                    }
                },
                schema: { // describe the result format
                    data: "results" // the data which the data source will be bound to is in the "results" field
                }
            });

        $("#endless-scrolling").kendoMobileListView({
            dataSource: dataSource,
            template: $("#endless-scrolling-template").text(),
            endlessScroll: true,
            scrollTreshold: 30 //treshold in pixels
        });
    }
</script>

<style scoped>
    .tweet {
        font-size: .8em;
        line-height: 1.4em;
    }
    .pullImage {
        width: 64px;
        height: 64px;
        border-radius: 3px;
        float: left;
        margin-right: 10px;
    }
    .sublink {
        font-size: .9em;
        font-weight: normal;
        display: inline-block;
        padding: 3px 3px 0 0;
        text-decoration: none;
        opacity: .8;
    }
</style>


    <script>
        window.kendoMobileApplication = new kendo.mobile.Application(document.body);
    </script>
</body>
</html>
